<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .container {
        /*实现一个同心圆*/
        width: 150px;
        height: 150px;
        border: 70px solid red;
        border-radius: 50%;
        /* 通过z轴实现任意角度旋转  可以不加 */
        transform: rotateZ(22deg);
        /*同心圆的右边变颜色，呈现出扇形形状*/
        border-right-color: #000;
        /*background-color: #eeeeee;*/
    }
</style>
<body>
<div class="container"></div>
</body>
</html>
